<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>background</title>
    <style type="text/css">
      /* ************************************************************** */
      html:root {
        --box-width: 300px;
        --box-height: fit-content;
      }
      /* ************************************************************** */
      /* ************************************************************** */
      .full-rules {
        max-height: 0px;
        position: relative;
        transition: all 0.5s;
        overflow: hidden;
      }
      .full-rules-button {
        height: 36px;
        width: 120px;
        text-align: center;
        background-color: rgb(48, 140, 226);
        color: #fff;
      }
      .full-rules-button:focus + .full-rules {
        max-height: 9000px;
      }

      .case2 {
        background: url(../../Source/pic.jpg) center / 100% 100%;
        height: 120px;
        width: 120px;
        padding: 10px;
        border: 10px dashed black;
      }
      :checked:nth-of-type(1) ~ .case2 {
        background-clip: border-box;
      }
      :checked:nth-of-type(2) ~ .case2 {
        background-clip: padding-box;
      }
      :checked:nth-of-type(3) ~ .case2 {
        background-clip: content-box;
      }
      .case5 {
        height: 150px;
        width: 150px;
        background-image: linear-gradient(red, blue);
        border: 30px dashed black;
        padding: 30px;
      }
      :checked:nth-of-type(1) ~ .case5 {
        background-origin: border-box;
      }
      :checked:nth-of-type(2) ~ .case5 {
        background-origin: padding-box;
      }
      :checked:nth-of-type(3) ~ .case5 {
        background-origin: content-box;
      }
      /* ************************************************************** */
      /* ************************************************************** */
    </style>
  </head>
  <body>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <header>
      <a href="./7-文字排版与装饰.html">上一篇</a>
      <a href="./9-opacity与增强.html">下一篇</a>
    </header>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <section class="demo-box article-mod">
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>background语法</dt>
        <dd>
          <p>
            此属性是一个
            简写属性，可以在一次声明中定义一个或多个属性：background-clip、background-color、background-image、background-origin、background-position、background-repeat、background-size，和
            background-attachment。
          </p>
          <pre>
&lt;bg-size&gt; 只能紧接着 &lt;position&gt; 出现，以&quot;/&quot;分割，如： &quot;center/80%&quot;.
&lt;box&gt; 可能出现 0 次、1 次或 2 次。如果出现 1 次，它同时设定 background-origin 和 background-clip。如果出现 2 次，第一次的出现设置 background-origin，第二次的出现设置 background-clip。
&lt;background-color&gt; 只能被包含在最后一层。
          </pre>
          <button class="full-rules-button">点击完整语法</button>
          <pre class="full-rules"><code>
          background = 
            [ &lt;bg-layer&gt;# , ]? &lt;final-bg-layer&gt;  
          
          &lt;bg-layer&gt; = 
            &lt;bg-image&gt;                      ||
            &lt;bg-position&gt; [ / &lt;bg-size&gt; ]?  ||
            &lt;repeat-style&gt;                  ||
            &lt;attachment&gt;                    ||
            &lt;box&gt;                           ||
            &lt;box&gt;                           
          
          &lt;final-bg-layer&gt; = 
            &lt;&#x27;background-color&#x27;&gt;            ||
            &lt;bg-image&gt;                      ||
            &lt;bg-position&gt; [ / &lt;bg-size&gt; ]?  ||
            &lt;repeat-style&gt;                  ||
            &lt;attachment&gt;                    ||
            &lt;box&gt;                           ||
            &lt;box&gt;                           
          
          &lt;bg-image&gt; = 
            &lt;image&gt;  |
            none     
          
          &lt;bg-position&gt; = 
            [ left | center | right | top | bottom | &lt;length-percentage&gt; ]  |
            [ left | center | right | &lt;length-percentage&gt; ] [ top | center | bottom | &lt;length-percentage&gt; ]  |
            [ center | [ left | right ] &lt;length-percentage&gt;? ] &amp;&amp; [ center | [ top | bottom ] &lt;length-percentage&gt;? ]  
          
          &lt;bg-size&gt; = 
            [ &lt;length-percentage [0,∞]&gt; | auto ]{1,2}  |
            cover                                      |
            contain                                    
          
          &lt;repeat-style&gt; = 
            repeat-x                                     |
            repeat-y                                     |
            [ repeat | space | round | no-repeat ]{1,2}  
          
          &lt;attachment&gt; = 
            scroll  |
            fixed   |
            local   
          
          &lt;box&gt; = 
            border-box   |
            padding-box  |
            content-box  
          
          &lt;image&gt; = 
            &lt;url&gt;       |
            &lt;gradient&gt;  
          
          &lt;length-percentage&gt; = 
            &lt;length&gt;      |
            &lt;percentage&gt;  
          
          &lt;url&gt; = 
            url( &lt;string&gt; &lt;url-modifier&gt;* )  |
            src( &lt;string&gt; &lt;url-modifier&gt;* )  </code></pre>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>background-clip</dt>
        <p><i>设置背景延伸范围</i></p>
        <dd>
          <input type="radio" name="case2" value="1" />
          border-box
          <br />
          <input type="radio" name="case2" value="2" />
          paddig-box
          <br />
          <input type="radio" name="case2" value="3" />
          content-box
          <div class="case2"></div>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>background-color</dt>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>background-image</dt>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>background-origin</dt>
        <p><i>规定背景图片(img)相对于什么来定位</i></p>
        <input type="radio" name="case5" value="1" />
        border-box
        <br />
        <input type="radio" name="case5" value="2" />
        paddig-box
        <br />
        <input type="radio" name="case5" value="3" />
        content-box
        <div class="case5"></div>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>background-position</dt>
        <dd>
          <p><i>调整背景位置，默认center，或50% 50%</i></p>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>background-repeat</dt>
        <dd>
          <p><i>定义图像重复模式</i></p>
          <ul>
            <li><b>repeat-x</b>：横向重复</li>
            <li><b>repeat</b>：重复</li>
            <li><b>space</b>：尽可能利用空间来重复；不会截断；第一个和最后一个依托元素的边上</li>
            <li><b>round</b>：允许图像伸缩，来尽可能填充（由浏览器决定）</li>
            <li><b>no-repeat</b>：不重复</li>
            <li><b>space-repeat</b>：</li>
          </ul>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>background-size</dt>
        <dd>
          <p><i>图像尺寸</i></p>
          <ul>
            <li><b>contain</b>：完整展示图片，不伸缩</li>
            <li><b>cover</b>：图片尽可能完全覆盖元素区域，不伸缩</li>
            <li><b>百分比</b></li>
            <li><b>数值</b></li>
          </ul>
          ps：当使用数值和百分比时，可以两个值混搭
        </dd>
        <dd>
          <h4>当值为auto时的图像大小计算</h4>
          <section>暂无</section>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>background-attachment</dt>
        <dd>决定是否在视口固定</dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
    </section>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <link rel="stylesheet" href="./0-模板.css" />
    <link
      rel="stylesheet"
      href="../../Module/hightlight/styles/hybrid.min.css"
    />
    <script src="../../Module/hightlight/highlight.min.js"></script>
    <script>
      hljs.highlightAll()
    </script>
  </body>
</html>
